@import "~pc/styles/color_palette.less";
@import "~pc/components/common/button_base/button.less";

// btn_plus_icon
.btn-plus-icon {
  color: @btn_plus_icon_color;
  border-radius: 50%;
  padding: 0;
  .setBg2 (@btn_plus_icon_normal_bg, @btn_plus_icon_hover_bg, @btn_plus_icon_active_bg);
}

.btn-plus-icon-shadow {
  backdrop-filter: blur(4px);
}

// btn_plus_font
.btn-plus-font {
  color: @btn_plus_font_color;
  font-size: 14px;
  .setBg2 (@btn_plus_icon_normal_bg, @btn_plus_font_hover_bg, @btn_plus_font_active_bg);

  &:not(.btn-plus-font-icon-only) {
    border-radius: 40px;
  }
}

.btn-plus-font-icon-only {
  border-radius: 50%;
}

// btn_plus_translucent
.btn.btn-plus-translucent {
  color: var(--staticWhite0);
  background-color: rgba(var(--defaultBg-rgb), 50%);
  border: 1px solid var(--defaultBg);

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 0.5;
  }
}

.btn-group {
  .btn {
    border-radius: 0px;
    position: relative;

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    // &:hover {

    //   &:not(:first-child) {
    //     &:before {
    //       display: none;
    //     }
    //   }
    // }

    &:not(:first-child) {
      &:before {
        content: " ";
        display: block;
        width: 1px;
        height: 12px;
        position: absolute;
        top: 50%;
        left: -1px;
        background: #e6e6e6;
        z-index: 3;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 1 !important;
      }
    }
  }
}
